<template>
  <div class="cate_add">

    <el-header class="top">
      <el-container>
        <el-row>
          <el-col :span="18">
              <i class="el-icon-s-home"></i>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/' }">系统设置</el-breadcrumb-item>
                <el-breadcrumb-item>修改个人信息</el-breadcrumb-item>
              </el-breadcrumb>
          </el-col>

          <el-col :span="6">
            <img src="../assets/blog_small.png" alt="" class="user_ico">
            <span>您好,&nbsp;{{user_info.username}},欢迎回来!</span>
            <el-dropdown>
                <span class="el-dropdown-link">
                  设置<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>黄金糕</el-dropdown-item>
                  <el-dropdown-item>狮子头</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-container>
    </el-header>

    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>修改信息</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
       
        <!-- 卡片组件的内容-添加表单 -->
        <el-form ref="addForm" :model="info" label-width="80px" :rules="formRules">

            <el-form-item label="用户名" prop="username" >
              <el-input v-model="info.username" style="width:300px" placeholder="输入用户名"></el-input>
            </el-form-item>

            <el-form-item label="原密码">
              <el-input v-model="info.old_pwd" style="width:300px" type="password" disabled></el-input>
            </el-form-item>
 
            <el-form-item label="密码" prop="pwd">
              <el-input v-model="info.pwd" style="width:300px" placeholder="输入新密码"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirm_pwd">
              <el-input v-model="info.confirm_pwd" style="width:300px" placeholder="确认新密码"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit('addForm')">立即保存</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>

    </el-card>
  </div>
</template>

<script>
  import http from '../utils/http';

  export default {
    data(){
      //自定义验证A01-2：data 函数的return前，定义验证函数

      //自定义验证函数1：新密码
      var validatePass = (rule, value, callback) => {
        //当有值的时候，再验证
        if (value) {
          // 自定义验证逻辑：如用正则验证格式 
          //不符合格式，提示信息
          let reg = /^.{3,12}$/;
          if(!reg.test(value)){
            callback(new Error('密码长度在3到12个字符')); //自定义验证错误提示信息， callback一定要写
          }
          
          //符合格式，通过
          callback()
          // 验证指定的表单项
          // 如果确认密码有值，要检查确认密码是否符合 验证规则
          // if (this.info.confirm_pwd !== '') {
          //   this.$refs.addForm.validateField('confirm_pwd')
          //   callback()
          // }
        }else{
          callback() //没有值，不验证，直接通过
        }
      };
      
      //自定义验证函数2：确认新密码
      var validatePass2 = (rule, value, callback) => {
        console.log("原密码："+this.info.pwd+"，确认密码："+value)

        if(this.info.pwd && !value){
          callback(new Error('请确认新密码!'));
        } else if (this.info.pwd){
          // 比较密码是否一致
          if(value !== this.info.pwd){
            callback(new Error('两次输入密码不一致!'));
          }
          callback();
        } else{
          callback();
        }
      };

      //注意： 在 Element UI 中，自定义验证函数的 callback 参数是一个回调函数，用于通知验证的结果。
      /*
      它的作用如下：
验证通过：当验证成功时，调用 callback()，不传递任何参数。这表示该字段的值是有效的。
验证失败：当验证失败时，调用 callback(new Error('错误信息'))，并传递一个 Error 对象，包含错误信息。这样，Element UI 会将该错误信息显示给用户。
在自定义验证规则中，必须确保每个分支都调用 callback 方法。否则，表单的验证可能无法正常工作，导致 el-form 组件的 validate 方法无法进入
回调函数，从而无法正确处理表单提交的结果。
      */

      //返回组件的数据
      return {
        //把表单数据放一个对象中
        info:{
          username:"", //用户名
          old_pwd:"",//旧密码
          pwd:"", // 新密码
          confirm_pwd:"",// 确认新密码
        },
        //验证规则
        formRules:{
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            // { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
            //自定义验证A02-1： 使用pattern 指定正则表达式进行验证
            { pattern:/^.{6,20}$/,message: '长度在6到20个字符', trigger: 'blur'}
          ],
          // old_pwd: [
          //   { required: true, message: '请输入原密码', trigger: 'blur' },
          //   { min: 3, max: 20, message: '长度在6到12个字符字', trigger: 'blur' }
          // ],
          // 表单验证
          // 默认内置验证方法
          // pwd: [
          //   { required: true, message: '请输入新密码', trigger: 'blur' },
          //   { min: 3, max: 20, message: '长度在6到12个字符字', trigger: 'blur' }
          // ],
          // pwd2: [
          //   { required: true, message: '请确再输入一下新密码', trigger: 'blur' },
          //   { min: 6, max: 12, message: '长度在6到12个字符字', trigger: 'blur' }
          // ]
          // 自定义验证函数，实现自定义表单验证
          pwd:[
            { 
              // 自定义验证A01-1：通过validator定义验证函数
              validator: validatePass, 
              trigger: 'blur', 
              // message: '请输入新密码'  自定义验证规则了，不要在这儿写提示，应该到自定义的验证函数中用户callback方法返回
            }
          ],
          confirm_pwd:[
            { 
              // 自定义验证A01-1：通过validator定义验证函数
              validator: validatePass2, 
              trigger: 'blur', 
              // message: '两次密码不一致'
            }
          ]
        },
        user_info:{
          uid:"",
          username:""
        } //用户信息
      }
    },
    async created(){
      // A目标：取当前用户的信息，显示到页面上

      // 发请求取数据
      let res = await http.get('/api/users/get_user_info')
      console.log(res)

      // 拿到后端给的数据
      let result = res.data||{}

      console.log(result)
      // 把从后端拿到的数据给表单
      if(result.code == 0){
        this.info.username = result.data.username;
        this.info.old_pwd = result.data.pwd;
      }

      // 获取当前登录的用户名
      let obj = JSON.parse(localStorage.getItem('blog_users')); //取到的是字符串，要转为对象好取里面的属性
      this.user_info.uid = obj.uid;
      this.user_info.username = obj.username;

    },
    methods:{
      onSubmit(formName){
        console.log("提交表单")
        //  this.$refs[formName] 获取表单
        // this.$refs[formName].validate 调用表单验证方法，告诉我们验证是否通过
        this.$refs[formName].validate(async (valid)=>{
          console.log(valid) //true 通过
          
          // 通过,
          if(valid){
              // axios请求后端，把数据发给别个，让别个保存起来
              // /users/set_user_info
              let res = await http.post("/api/users/set_user_info",{
                username:this.info.username,
                // pwd:this.info.old_pwd
                // 用户如果修改了密码，就更新密码，否则就使用原密码
                pwd:this.info.pwd ? this.info.pwd : this.info.old_pwd
              })
              console.log(res)

              // 取后端给的数据
              const result = res.data;

              // 成功
              if(result.code == 0){
                // Message 消息提示
                this.$message({
                  type:"success",
                  message:result.msg
                })
                //重置表单
                // this.resetForm();

              }else{
                this.$message({
                  type:"error",
                  message:result.msg
                })
              }
          }else{
            //没有通过验证，给用户一个提示
            this.$message({
              type:"warning",
              message:"请按要求，完整填写表单!"
            })
          }
        });
      },
      resetForm(){
        this.$refs.addForm.resetFields();
        //没有验证的表单元素不会被重置，哪我们就手动重置。
        this.info.pwd="";
        this.info.pwd2=0;
      }
    }
  }
</script>

<style lang="less" scoped>
.cate_add{
  // margin:15px;
  
  // /deep/ 深度选择器，可以重置组件内置的样式。别忘了样式要加scoped，
  // 有可能还需要!important来提升样式的优先级。
  /deep/.el-header {
    display: flex;
    align-items: center;
    height: 62px !important;
    background: #edebeb;

    .el-icon-s-home {
      color: #000000;
      font-size: 20px;
    }
    
    // container、row、col 默认除了宽度外，没有样式，需要自己给宽、高、排列大小(如flex)
    .el-container{
      .el-row{
          width: 100%;
         
          .el-col-18,.el-col-6{
            height: 60px;
          }
          
          // 左
          .el-col-18{
            display: flex;
            align-items: center;
          }

          // 右
          .el-col-6{
            display: flex;
            flex-direction:row;
            justify-content: flex-end;
            align-items: center;

            .user_ico{
              width: 60px;
              height: 60px;
              border-radius: 50%;
            }

            span{
              margin:0 7px;
            }
          }
      }
    }
    .el-breadcrumb {
      height: 35px;
      display: flex;
      align-items: center;
      margin-bottom: 0;
      font-size: 12px;
    }
  }

  .box-card{
    margin: 10px;
  }
}
</style>